<template>
  <div class="main">
    <div>
      <fcTable
        ref="table"
        :columes="columes"
        :selection="false"
        :url="this.list"
        :deletUrl="universalUrl"
        row-key="id"
      >
        <!-- 表上头按钮插槽 -->
        <template v-slot:button>
          <el-button
            icon="el-icon-circle-plus-outline"
            type="primary"
            v-hasPermi="['system']"
            @click="add()"
          >新增
          </el-button
          >
        </template>

        <template #status="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value=0
            :inactive-value=1
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="upStatus(scope.row)"
          >
          </el-switch>
        </template>
        <template #operation="scope">
          <el-link type="primary" style="margin-right: 5px" @click="edit(scope.row)">编辑</el-link>
        </template>
      </fcTable>
    </div>
    <materialTypeAdd
      ref="editAndAdd"
      :title="title"
      :visible.sync="visible"
      :item="element"
      @Ok="addAndEdit"
    ></materialTypeAdd>
  </div>
</template>
<script>
  import request from "@/utils/request";
  import fcTable from "@/components/futureCloudMOM/fcTable";
  import materialTypeAdd from "./materialTypeAdd";

  export default {
    name: "MaterialType",
    components: {
      fcTable,
      materialTypeAdd,
    },
    data() {
      return {
        columes: [
          {
            label: "类型名称",
            key: "name",
            visible: true,
          },
          {
            label: "类型编码",
            key: "code",
            visible: true,
          },
          {
            label: "小数位数",
            key: "decimalNumber",
            visible: true,
            search: true,
          },
          {
            label: "状态",
            key: "status",
            visible: true,
            type: "slot",
            search: true,
            // dictCode: "sys_normal_disable",
          },
          {
            label: "备注",
            key: "remark",
            visible: true,
          },
          {
            label: "创建时间",
            key: "sysCreateTime",
            visible: true,
            sortable: true,
          },
          {
            label: "操作",
            key: "operation",
            delete: true,
            //插槽需要的属性
            type: "slot",
            //element-ui自带的属性 参考文档写 都可用
            fixed: "right",
            //显隐列需要的属性
            visible: true,
            //显隐禁选中
            disabled: true,
            search: true,
          },
        ],
        //新增/编辑弹窗打开的标题
        title: "",
        //显隐
        visible: false,
        //数据
        element: {},
        //列表页
        list: "basic/material_type/getListByTree",
        //新增 修改 删除
        universalUrl: "basic/material_type",
      };
    },

    methods: {
      add() {
        this.element = null;
        this.title = "新增";
        this.visible = true;
      },
      edit(item) {
        this.element = item;
        this.title = "编辑";
        this.visible = true;
      },
      addAndEdit(item) {
        console.log(item);
        let method = "put";
        if (this.title === "新增") {
          method = "post";
        }
        request({
          url: this.universalUrl,
          method: method,
          data: item,
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.$refs.table.getList();
            this.visible = false;
          } else {
            this.$message.error(res.message);
          }
        });
      },
      // 状态更新
      upStatus(item){
        request({
          url: this.universalUrl,
          method: "put",
          data: item,
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.$refs.table.getList();
          } else {
            this.$message.error(res.message);
          }
        });
      }

    },
  };
</script>
<style scoped>
  .main {
  }
</style>
